How to build animated lists with MotionLayout and ViewPager2

Animating widgets like ImageViews, AppBars and DrawerLayouts is easy thanks to MotionLayout (which became stable with the release of ConstrainLayout 2.0), but what about list items? There are a bunch of blogs about animating widgets, but very few are about animation list items. For my sample project, I chose our Filmdom app and tried to implement its landing screen. Below, you will find out how it went and what are the pros and cons of building such a layout.

Final version of the layout is shown in the video below.

Your browser does not support the video tag.

Note: It is considered that you know the basics of MotionLayout and ViewPager2, as we will not go into details of how each of these components work.

The purpose of this blog is list animation, so we will exclude everything else for the point of brevity.

To showcase recommended movies, I used ViewPager2 which extends RecyclerView. The only attributes from the XML layout worth mentioning are clipToPadding and clipChildren, we need to set both of those attributes to false. Attribute clipChildren determines whether each child view is allowed to draw outside its own bounds within the parent, and clipToPadding attribute determines whether child view is allowed to draw outside of the parent itself. Without these attributes set to false, our ViewPager would clip two upcoming pages and we would only see the currently selected page which is not what we want. In this case, attribute paddingEnd narrows our selected page, so we have space to show two more pages on the screen.